<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head th:replace="/common/include :: header(~{::title}, ~{::link}, ~{::style})">
    <title>DEMO-表格-冻结列</title>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="col-xs-12 select-table table-bordered table-striped">
        <table id="bootstrap-table"></table>
    </div>
</div>
<div th:replace="/common/include :: footer"></div>

<script th:inline="javascript">
    $(function () {
        loadTable();
    });

    function loadTable() {
        var options = {
            code: 'ID',
            url: ctx + 'public/demo/table',
            height: 300,
            fixedColumns: true,
            fixedNumber: 2,
            fixedRightNumber: 1,
            pagination: true,
            sidePagination: 'client',
            columns: [{
                field: 'ID',
                title: 'ID',
                align: 'center',
                width: '50px'
            },
            {
                field: 'NAME',
                title: '姓名',
                align: 'center',
                width: '250px'
            },
            {
                field: 'AGE',
                title: '年龄',
                align: 'center',
                width: '250px'
            },
            {
                field: 'NAME',
                title: '姓名',
                align: 'center',
                width: '250px'
            },
            {
                field: 'AGE',
                title: '年龄',
                align: 'center',
                width: '250px'
            },
            {
                field: 'NAME',
                title: '姓名',
                align: 'center',
                width: '250px'
            },
            {
                field: 'AGE',
                title: '年龄',
                align: 'center',
                width: '250px'
            },
            {
                field: '',
                title: '操作',
                align: 'center',
                width: '80px',
                formatter: function(value, row, index) {
                    var actions = [];
                    actions.push('<a class="btn btn-sm btn-outline btn-primary" href="#">操作</a>');
                    return actions.join("");
                }
            }]
        };
        $.table.init('bootstrap-table', options);
    }
</script>
</body>
</html>
